<script setup>
const props = defineProps({
  to: {
    type: [String, Object],
    required: true,
  },
  // // 如果使用 TypeScript，请添加 @ts-ignore
  // ...RouterLink.props,
  // inactiveClass: String,
})



</script>

<template>
  <router-link :to="to" custom v-slot="{navigate, isActive, isExactActive }">
    <!-- 自定义按钮 -->
    <button
        :class="['custom-link', { active: isActive, exact: isExactActive }]"
        @click="navigate"
    >
      <slot></slot> <!-- 插槽内容，允许用户传入自定义的按钮文字或图标 -->
    </button>
  </router-link>
</template>

<style scoped>
.custom-link {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 14px;
  transition: background-color 0.3s;
}

.custom-link:hover {
  background-color: #0056b3;
}

.active {
  background-color: #28a745;
}

.exact {
  font-weight: bold;
}
</style>